<template>
  <div>
    <div id="CarRegister" :style="{width:'100%',height:'20vh'}"></div>
  </div>
</template>

<script>
import { picData } from '@/api/api'
  export default {
    name: 'CarRegister',
    data () {
      return {
        id:["STAT-005","STAT-006"],
        picD:[],
        option: {
          // color:['#7df5ed','#fca55f'],//配置颜色
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
            position: ['0', '30%']
          },
          legend: {
            orient: 'horizontal',
            bottom: 0,
            data: ['沪C', '非沪C'],
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          series: [
            {
              name: '汽车保有量占比',
              type: 'pie',
              radius: ['30%', '50%'],
              avoidLabelOverlap: false,
              top: -30,
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  name: '沪C',
                  value: 135,
                  itemStyle: {
                    normal: {
                      color: { // 颜色渐变
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0,
                          color: '#fca55f' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#d57121' // 100% 处的颜色1
                        }]
                      },
                    }
                  }
                },
                {
                  name: '非沪C',
                  value: '',
                  itemStyle: {
                    normal: {
                      color: { // 颜色渐变
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0,
                          color: '#73e7e1' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#00998f' // 100% 处的颜色1
                        }]
                      },
                    }
                  }
                },
              ]
            }
          ]
        }
      }
    },
    created() {


    },
    mounted(){
      this.getPicData()

    },
    methods: {
      drawLine(){
        let CarRegister = this.$echarts.init(document.getElementById('CarRegister'))
        CarRegister.setOption(this.option);
        window.onresize=function(){
          CarRegister.resize();
        }
      },
      getPicData(){
        var that = this;
        let params = {
          id : this.id.toString()
        }
        picData(params).then((res)=>{
          if(res.success){
            that.picD = res.result;
            for(var i=0;i<that.picD.length;i++){
              if(that.picD[i].name.toString().indexOf("非沪C")>0){
                that.option.series[0].data[1].value=that.picD[i].value
              }else{
                that.option.series[0].data[0].value=that.picD[i].value
              }
            }
            this.drawLine()
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>